import { Card, Button, Select, DatePicker, Space } from "antd";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import {
  getTimeExportAsync,
  changeParams,
} from "@/store/totalDateExport/totalDateExportSlice";
import { isEqual } from "lodash-es";
import dayjs from "@/utils/dayjs";
import { TZ } from "@/utils/env";
const { RangePicker } = DatePicker;

export default function Filter() {
  const dispatch = useAppDispatch();
  const { params, table } = useAppSelector((state) => state.totalDateExport);
  const {
    config: { data: { data: { time_export_conf = [] } = {} } = {} } = {},
  } = useAppSelector((state) => state.app);

  return (
    <Card>
      <Space
        wrap
        size="large"
        className="w-full flex justify-between"
        classNames={{ item: "last:ml-auto" }}
      >
        <label>
          <span>时间：</span>
          <RangePicker
            showTime
            value={[
              dayjs.unix(params.start_time).tz(TZ),
              dayjs.unix(params.end_time).tz(TZ),
            ]}
            onChange={(date) => {
              if (!date) {
                return;
              }
              dispatch(
                changeParams({
                  start_time: date[0]?.unix(),
                  end_time: date[1]?.unix(),
                })
              );
            }}
          />
        </label>
        <label>
          <span>下载类型：</span>
          <Select
            className="min-w-[120px]"
            options={time_export_conf}
            value={params.download_type}
            onChange={(download_type) =>
              dispatch(changeParams({ download_type }))
            }
          />
        </label>
        <label>
          <span>是否重新统计：</span>
          <Select
            className="min-w-[120px]"
            onChange={(re_statistic) =>
              dispatch(changeParams({ re_statistic }))
            }
            value={params.re_statistic}
            options={[
              { label: "是", value: 1 },
              { label: "否", value: 0 },
            ]}
          />
        </label>

        <Button
          loading={table.status === "loading"}
          type="primary"
          onClick={(): void => {
            if (isEqual(params, table?.params)) {
              dispatch(getTimeExportAsync({ ...params }));
            } else {
              const newParams = {
                ...params,
              };
              dispatch(changeParams(newParams));
              dispatch(getTimeExportAsync(newParams));
            }
          }}
        >
          查询
        </Button>
      </Space>
    </Card>
  );
}
